<template>
  <div>
    <div style="width: 60%; margin: 30px auto">
      <el-button
        type="success"
        style="font-size: 20px"
        @click="addDialogFormVisible = true"
        >新增上级分类</el-button
      >
      <el-table :data="icons" stripe>
        <el-table-column type="expand" label="下级分类" width="100px">
          <template #default="scope">
            <el-table
              :data="scope.row.categories"
              :header-cell-style="{ background: '#cbefea', color: 'black' }"
            >
              <el-table-column label="分类id" prop="id"></el-table-column>
              <el-table-column label="分类名称" prop="name"></el-table-column>
              <el-table-column label="操作" width="240">
                <template #default="scope">
                  <el-button
                    type="primary"
                    @click="handleEditCategory(scope.row)"
                    >修改</el-button
                  >
                  <el-popconfirm
                    @confirm="deleteCategory(scope.row)"
                    title="确定删除？"
                  >
                    <template #reference>
                      <el-button type="danger">删除</el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          label="名称"
          prop="name"
          width="60px"
        ></el-table-column>
        <el-table-column label="id" prop="id" width="60px"></el-table-column>
        <el-table-column label="icon">
          <template #default="scope">
            <i class="iconfont" v-html="scope.row.value"></i>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" circle @click="handleEditIcon(scope.row)"
              >修改</el-button
            >
            <el-button
              type="success"
              circle
              @click="handleAddCategory(scope.row)"
              >添加</el-button
            >
            <el-popconfirm
              @confirm="deleteIcon(scope.row.id)"
              title="确定删除？"
            >
              <template #reference>
                <el-button type="danger" style="margin-left: 10px" circle
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- icon修改弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="修改上级分类">
      <el-form :model="icon">
        <el-form-item label="图标" label-width="100px">
          <i class="iconfont" v-html="icon.value"></i>
        </el-form-item>
        <el-form-item label="更改图标" label-width="100px">
          <el-select v-model="icon.value" placeholder="请选择图标">
            <el-option v-for="item in iconStore" :key="item" :value="item">
              <i class="iconfont" v-html="item"></i>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogFormVisible = false" style="font-size: 20px"
          >取消</el-button
        >
        <el-button type="primary" @click="editIcon" style="font-size: 20px">
          <i class="iconfont icon-r-yes" style="font-size: 22px"></i> 确定
        </el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="addDialogFormVisible" title="新增上级分类">
      <el-form :model="addIcon">
        <el-form-item label="图标" label-width="100px">
          <i class="iconfont" v-html="addIcon.value"></i>
        </el-form-item>
        <el-form-item label="更改图标" label-width="100px">
          <el-select v-model="addIcon.value" placeholder="请选择图标">
            <el-option v-for="item in iconStore" :key="item" :value="item">
              <i class="iconfont" v-html="item"></i>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" label-width="100px">
          <el-input v-model="addIcon.name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogFormVisible = false" style="font-size: 20px"
          >取消</el-button
        >
        <el-button type="primary" @click="saveIcon" style="font-size: 20px">
          <i class="iconfont icon-r-yes" style="font-size: 22px"></i> 确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import { iconsList } from "../../../utils/icons";
import "../../../resource/css/icon.css";
import { ElMessageBox } from "element-plus";

const store = useStore();

// Reactive data
const iconStore = ref<any>(iconsList.iconStore);
const icons = ref<any[]>([]);
const icon = ref<any>({});
const addIcon = ref<any>({ name: "" });
const dialogFormVisible = ref<boolean>(false);
const addDialogFormVisible = ref<boolean>(false);

// Methods
const load = () => {
  store.state.request.get("/api/icon").then((res: any) => {
    icons.value = res.data;
  });
};

const handleEditCategory = (category: any) => {
  ElMessageBox.prompt("请输入修改后的名称", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(({ value }: any) => {
      if (!value?.trim()) {
        store.state.message.error("请输入名称");
        return;
      }
      category.name = value;
      store.state.request.post("/api/category", category).then((res: any) => {
        if (res.code === "200") {
          store.state.message.success("修改成功");
        } else {
          store.state.message.error("修改失败");
        }
      });
    })
    .catch(() => {});
};

const handleAddCategory = (icon: any) => {
  ElMessageBox.prompt("请输入新增的下级分类名称", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(({ value }: any) => {
      if (!value?.trim()) {
        store.state.message.error("请输入名称");
        return;
      }
      store.state.request
        .post("/api/category/add", { name: value, iconId: icon.id })
        .then((res: any) => {
          if (res.code === "200") {
            store.state.message.success("新增成功");
            load();
          } else {
            store.state.message.error("新增失败");
          }
        });
    })
    .catch(() => {});
};

const handleEditIcon = (iconData: any) => {
  icon.value = JSON.parse(JSON.stringify(iconData));
  dialogFormVisible.value = true;
};

const editIcon = () => {
  delete icon.value.categories;
  store.state.request.post("/api/icon", icon.value).then((res: any) => {
    if (res.code === "200") {
      store.state.message.success("修改成功");
      dialogFormVisible.value = false;
    } else {
      store.state.message.error("修改失败");
    }
  });
};

const saveIcon = () => {
  if (!addIcon.value.value) {
    store.state.message.error("请选择上级分类图标");
    return;
  }
  store.state.request.post("/api/icon", addIcon.value).then((res: any) => {
    if (res.code === "200") {
      store.state.message.success("新增成功");
      addDialogFormVisible.value = false;
      load();
    } else {
      store.state.message.error("新增失败");
    }
  });
};

const deleteIcon = (iconId: any) => {
  store.state.request.get("/api/icon/delete?id=" + iconId).then((res: any) => {
    if (res.code == "200") {
      store.state.message.success("删除成功");
      load();
    } else {
      store.state.message.error(res.msg);
    }
  });
};

const deleteCategory = (category: any) => {
  store.state.request
    .get("/api/category/delete?id=" + category.id)
    .then((res: any) => {
      if (res.code == "200") {
        store.state.message.success("删除成功");
        load();
      } else {
        store.state.message.error(res.msg);
      }
    });
};

// Lifecycle
onMounted(() => {
  load();
  console.log(iconStore.value);
});
</script>

<style scoped>
@import "../../../resource/css/icon.css";
</style>
